<template>
	<view class="exam-content">
		<block v-if="currentQuestion.kind">
		<view class="u-line"></view>
		<!-- 进度与题型 -->
		<view class="question-info">
			<text class="question-type">{{ currentQuestion.kind | typeFilter }}</text>
			<text class="question-progress">{{ currentIndex + 1 }}/{{ questions.length }}</text>
		</view>
		
		<!-- 题目内容 -->
		<view class="question-content">
			<rich-text :nodes="currentQuestion.title"></rich-text>
		</view>
		
		<!-- 选项区域 -->
		<view class="options">
		
			<!-- 判断题 -->
			<template v-if="currentQuestion.kind === 'JUDGE'">
				<view v-for="(option, index) in currentQuestion.options_json" :key="index" class="option-item multiple"
					:class="{ active: option.key === currentQuestion.answer }">
					{{ option.key }}. {{ option.value }}
					<text v-if="option.key === currentQuestion.answer" class="checkmark">✓</text>
				</view>
			</template>
			<!-- 单选题 -->
			<template v-if="currentQuestion.kind === 'SINGLE'">
				<view v-for="(option, index) in currentQuestion.options_json" :key="index" class="option-item multiple"
					:class="{ active: option.key === currentQuestion.answer }">
					{{ option.key }}. {{ option.value }}
					<text v-if="option.key === currentQuestion.answer" class="checkmark">✓</text>
				</view>
			</template>
		
			<!-- 多选题 -->
			<template v-if="currentQuestion.kind === 'MULTI'">
				<view v-for="(option, index) in currentQuestion.options_json" :key="index"
					class="option-item multiple" :class="{ active: currentQuestion.answer.includes(option.key) }"
					>
					{{ option.key }}. {{ option.value }}
					<text v-if="currentQuestion.answer.includes(option.key)" class="checkmark">✓</text>
				</view>
			</template>
		</view>
		
		<view class="answer-info">
			<text class="question-type">正确答案</text>
			<text class="answer">{{ currentQuestion.answer}}</text>
		</view>
		<view class="u-line"></view>
		<view class="">
			<text class="text-bold">答案解析：</text>
			<view class="jx">
				<rich-text :nodes="currentQuestion.explain"></rich-text>
			</view>
		</view>
		<view class="fix-bottom">
			<u-grid :border="false" @click="clickMenu">
				<u-grid-item>
					<u-icon :customStyle="{paddingTop:20+'rpx'}" name="grid" :size="50"></u-icon>
					<text class="grid-text">{{ currentIndex + 1 }}/{{ questions.length }}</text>
				</u-grid-item>
				<u-grid-item>
					<u-icon :customStyle="{paddingTop:20+'rpx'}" name="play-left" :size="50"></u-icon>
					<text class="grid-text">上一题</text>
				</u-grid-item>
				<u-grid-item>
					<u-icon :customStyle="{paddingTop:20+'rpx'}" name="play-right" :size="50"></u-icon>
					<text class="grid-text">下一题</text>
				</u-grid-item>
			</u-grid>
		</view>
		</block>
		<!-- 空数据 -->
		<view class="fa-empty" v-if="!currentQuestion.kind">
			<u-empty textSize="28" mode="data"></u-empty>
		</view>
		<u-popup :show="tkShow" @close="tkShow=false">
			<view class="tm-list">
				<block v-for="(item,index) in questions" :key="index">
					<view :class="index == currentIndex?'tm-xh active-xh':'tm-xh'" @click="choiceTopic(index)">{{index+1}}</view>
				</block>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'fa-beiti',
		props: {
			questions:{
				type:Array,
				default:[]
			},
			judgeOptions:{
				type:Array,
				default:[]
			}
		},
		computed: {
				currentQuestion() {
					console.log(this.questions[this.currentIndex])
					return this.questions[this.currentIndex]
				},
				currentAnswer: {
					get() {
						return this.userAnswers[this.currentIndex] ||
							(this.currentQuestion.kind === 'MULTI' ? [] : null)
					},
					set(val) {
						this.$set(this.userAnswers, this.currentIndex, val)
					}
				},
		},
		
		data() {
			return {
				userAnswers:[],
				currentIndex: 0,
				timeRemaining:3592,
				tkShow:false
			};
		},
		
		filters: {
			typeFilter(type) {
				const typeMap = {
					JUDGE: '判断题',
					SINGLE: '单选题',
					MULTI: '多选题'
				}
				return typeMap[type]
			}
		},
		methods:{
			clickMenu(e){
				if(e===0){
					this.tkShow = true
				}
				if(e === 1){
					this.prevQuestion()
				}
				if(e === 2){
					this.nextQuestion()
				}
			},
			choiceTopic(index){
				this.currentIndex = index
				this.tkShow = false
			},
			
			// 切换题目
			prevQuestion() {
				if (this.currentIndex > 0) {
					this.currentIndex--
				}
			},
			
			nextQuestion() {
				if (this.currentIndex < this.questions.length - 1) {
					this.currentIndex++
				}
			},
			
			// 提交考试
			submitExam() {
				clearInterval(this.timer)
			
				// 计算得分
				let score = 0
				this.questions.forEach((q, index) => {
					const userAnswer = this.userAnswers[index]
					if (q.type === 'multiple') {
						if (Array.isArray(userAnswer) &&
							userAnswer.length === q.answer.length &&
							userAnswer.every(v => q.answer.includes(v))) {
							score++
						}
					} else {
						if (userAnswer === q.answer) {
							score++
						}
					}
				})
			
				uni.showModal({
					title: '考试结果',
					content: `得分：${score}/${this.questions.length}`,
					showCancel: false,
					success: () => {
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	.exam-content{
		background-color: #ffffff;
		padding: 24rpx;
		.u-line{
			position: relative;
			width: 100%;
			height: 20rpx;
			background-color: #f6f6f6;
		}
	}
	.fix-bottom {
		bottom: calc(env(safe-area-inset-bottom) + 15px);
		width: 95%;
		position: fixed;
		margin: 0 auto;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding-bottom: 24rpx;
		.grid-text{
			font-size: 26rpx;
			color: #666666;
		}
	}


	.exam-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0rpx;
		background-color: #ffffff;
		padding: 20rpx 0;
		.exam-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.timer {
			
			text-align: center;
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			
		}
	}
	.answer-info{
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		.question-type {
			// font-size: 28rpx;
			// color: #666;
			    font-size: 24rpx;
			    color: #fff;
			    background: linear-gradient(135deg, #7892fd, #5677fc);
			    padding: 8rpx 10rpx;
			    border-radius: 14rpx 14rpx 14rpx 0;
			    margin-right: 20rpx;
		}
		
		.answer {
			font-size: 28rpx;
			color: #007AFF;
		}
	}
	.question-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		.question-type {
			// font-size: 28rpx;
			// color: #666;
			    font-size: 24rpx;
			    color: #fff;
			    background: linear-gradient(135deg, #7892fd, #5677fc);
			    padding: 8rpx 10rpx;
			    border-radius: 14rpx 14rpx 14rpx 0;
			    margin-right: 20rpx;
		}

		.question-progress {
			font-size: 28rpx;
			color: #007AFF;
		}
	}

	.question-content {
		font-size: 32rpx;
		line-height: 1.6;
		margin-bottom: 50rpx;
		color: #333;
	}

	.options {
		.option-item {
			padding: 25rpx 30rpx;
			margin-bottom: 20rpx;
			background-color: #f6f6f6;
			border-radius: 12rpx;
			border: 1rpx solid #eee;
			position: relative;
			transition: all 0.2s;

			&.active {
				background-color: #e6f3ff;
				border-color: #007AFF;
				color: #007AFF;
			}

			&.multiple {
				padding-right: 80rpx;

				.checkmark {
					position: absolute;
					right: 30rpx;
					color: #007AFF;
					font-weight: bold;
				}
			}
		}
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin: 50rpx 0;

		button {
			flex: 0.48;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;

			&[disabled] {
				background-color: #eee !important;
				color: #999 !important;
			}
		}

		.prev-btn {
			background-color: #f8f8f8;
			color: #666;
		}

		.next-btn {
			background-color: #007AFF;
			color: white;
		}
	}
	.tm-list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 24rpx;
		.tm-xh{
			height: 88rpx;
			width: 88rpx;
			border-radius: 50%;
			margin-bottom: 30rpx;
			border: 1rpx solid #d0d0d0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 44rpx;
			color: #333;
		}
		.active-xh{
			background-color: #007AFF;
			color: #ffffff;
		}
	}
	.text-bold {
		display: block;
		margin: 24rpx 0;
		font-size: 28rpx;
		color: #333;
	    font-weight: 700;
	}
	.jx{
		margin-top: 24rpx;
	}
</style>
